<template>
    <el-form ref="propertyValues" :model="propertyValues" label-width="80px">
        <div style="width: 100px">产品详情
            <hr style="margin-left:30px;margin-top:20px;width: 1185px">       <!--给整条水平分割线搞美观一点-->
        </div>
        <div style="margin-top: 40px">
            <el-form-item label="类型">
                <el-select style="margin-left: -780px"
                           v-model="currentCategoryName" @change="getCurrentCategory()">
                    <el-option v-for="(cate,index) in category" v-model="cate.categoryName" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group style="margin-left: -740px" v-model="propertyValues[0].propertyValueProduct.productIsEnabled">
                    <el-radio label="销售中"></el-radio>
                    <el-radio label="停售中"></el-radio>
                    <el-radio label="促销中"></el-radio>
                </el-radio-group>
            </el-form-item>
        </div>
        <hr style="margin-left: 30px;margin-top: 20px;width: 1185px">
        <div style="width: 100px;margin-top: 20px">基本信息
        </div>

        <div style="margin-top: 40px">
            <el-form-item style="float: left" label="编号">
                <span style="margin-left: 90px">{{propertyValues[0].propertyValueProduct.productId}}</span>
            </el-form-item>
            <el-form-item style="float: left;margin-left: 200px" label="上架日期">
                <el-col :span="8">
                    <el-date-picker type="date" placeholder="选择日期"
                                    v-model="propertyValues[0].propertyValueProduct.productCreateDate"
                                    style="width: 100%;"></el-date-picker>
                </el-col>

                <el-col class="line" :span="2">---</el-col>

                <el-col :span="8">
                    <el-time-picker placeholder="选择时间" v-model="propertyValues[0].propertyValueProduct.productCreateDate"
                                    style="width: 100%;"></el-time-picker>
                </el-col>
            </el-form-item>

            <el-form-item style="width: 600px;" label="名称">
                <el-input v-model="propertyValues[0].propertyValueProduct.productName"></el-input>
            </el-form-item>

            <el-form-item style="float: left" label="标题">
                <el-input v-model="propertyValues[0].propertyValueProduct.productTitle"></el-input>
            </el-form-item>
            <el-form-item style="float: left;margin-left: 65px" label="原价">
                <el-input v-model="propertyValues[0].propertyValueProduct.productPrice"></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 750px" label="促销价">
                <el-input style="float: left;width: 206px"
                          v-model="propertyValues[0].propertyValueProduct.productSalePrice"></el-input>
            </el-form-item>
        </div>
        <hr style="margin-left: 30px;margin-top: 20px;width: 1185px">
        <div style="width: 100px;margin-top: 20px">概述图片
        </div>
        <el-image v-for="(image,index) in imageRoughUrl"
                  style="width: 120px; height: 120px; margin-left: 20px;margin-top: 40px;"
                  src="require('@/assets/img/productPictures/'+image.productImageSrc)"
                  fit="contain"><!--把图片导入后把src换为 :src就好了-->

        </el-image>

        <hr style="margin-left: 30px;margin-top: 20px;width: 1185px">
        <div style="width: 100px;margin-top: 20px">详情图片
        </div>
        <el-image  v-for="(image,index) in imageDetailUrl"
                   style="width: 120px; height: 120px; margin-left: 20px;margin-top: 40px"
                   src="require('@/assets/img/productPictures/'+image.productImageSrc)"
                   fit="contain"><!--把图片导入后把src换为 :src就好了-->

        </el-image>

        <hr style="margin-left: 30px;margin-top: 20px;width: 1185px">
        <div style="width: 100px;margin-top: 20px">属性值
        </div>

        <div  style="margin-top: 40px">
            <div v-for="(property,index) in propertys">
                <el-form-item style="float: left;width: 400px">
                    <span slot="label">{{property.propertyName}}</span>
                    <!--这里用于自定义el-form-item的label内容-->
                    <el-input v-model="propertyValues[index].propertyvalueValue"></el-input>
                </el-form-item>
            </div>
        </div>
        <div style="margin-left: -200px;margin-top: 300px">
            <el-button type="primary" @click="onSubmit()">保存</el-button>
            <el-button @click="cancel()">取消</el-button>
        </div>
    </el-form>
</template>

<script>
    export default {
        name: 'AddProduct',
        data() {
            return {
                currentCategoryName:null,  //当前所选中的种类名
                productId: null,    //产品的id
                category: [],   //已经有的种类集合
                propertys:[],   //当前选中种类的属性
                imageRoughUrl: [],//概述图片集合
                imageDetailUrl:[],//详情图片集合

                propertyValues: [
                    {
                    propertyvalueValue: '',
                    propertyValueProperty: {
                        propertyId:"",
                        propertyCategory: {
                        },
                    },
                    propertyValueProduct: {
                        productCategory: {
                        }
                    }
                }
                ]
            }
        },
        methods: {
            onSubmit() {
                this.$confirm("想清楚再确认修改", "修改提示", {
                    confirmButtonText: '确认修改',
                    cancelButtonText: '手抖勿介',
                    type: 'danger'
                }).then(() => { //确认添加新增商品
                    console.log("传出去的数据",this.propertyValues[0].propertyValueProduct)
                    //修改产品值
                    switch (this.propertyValues[0].propertyValueProduct.productIsEnabled) {   //将产品销售状态从文字改为数字
                        case '销售中' :
                            this.propertyValues[0].propertyValueProduct.productIsEnabled = 0
                            break;
                        case '已停售' :
                            this.propertyValues[0].propertyValueProduct.productIsEnabled = 1
                            break;
                        case '促销中' :
                            this.propertyValues[0].propertyValueProduct.productIsEnabled = 2
                            break;
                    }
                    this.$axios({
                        url: '/api/product',
                        method: 'post',
                        data: {
                          product: this.propertyValues[0].propertyValueProduct
                        }
                    }).then(res=>{
                        if (res.data == 0) {
                            console.log("新增商品失败", res)
                            this.$message({   //弹出错误框
                                showClose: true,
                                type: "error",
                                message: "新增商品失败",
                                center: true
                            })
                        }else {  //如果插入成功就将刚刚插入的记录的id赋给productId
                            this.propertyValues[0].propertyValueProduct.productId=res.data
                        }
                    })

                    for (let i = 0; i < this.propertyValues.length; i++) {
                        //将propertyValues添加完整
                        this.propertyValues[i].propertyValueProduct=this.propertyValues[0].propertyValueProduct
                        this.propertyValues[i].propertyValueProperty.propertyId=this.propertys[i].propertyId
                        let stop = 0  //循环终止变量，一旦出错立即跳出循环
                        //新增属性值
                        this.$axios({
                            url: '/api/propertyValue',
                            method: 'post',
                            data: {  //将propertyValue进行插入动作
                               propertyValue: this.propertyValues[i]
                            }
                        }).then(res => {
                                if (res.data == 0) {
                                    console.log("插入属性值失败", res)
                                    this.$message({   //弹出错误框
                                        showClose: true,
                                        type: "error",
                                        message: "插入属性值错误",
                                        center: true
                                    })
                                    stop = 1   //变量改变
                                }
                            })
                        if (stop == 1) {
                            break;   //跳出循环
                        }
                    }
                })
            },
            cancel() {
                this.getProductDetail()        //重新加载原来的数据

            },
            getCurrentCategory(){
                console.log("currentCategoryName：",this.currentCategoryName)  //打印现在选中的categoryName
                this.$axios({
                    url:'/api/propertyByCategoryName/',
                    method:'post',
                    data:{
                        categoryName:this.currentCategoryName
                    }
                }).then(res => { //获取该种类的所有属性
                    this.propertys = res.data                 //属性集合赋值给prpertys[]
                    console.log("该种类的所有属性propertys是：", this.propertys)
                })
             /*   let propertyValues=[];
                for (let i = 0; i < this.propertys.length; i++) {
                    let object =  {
                        propertyvalueValue: '',
                        propertyValueProperty: {
                            propertyId:"",
                            propertyCategory: {
                            },
                        },
                        propertyValueProduct: {
                            productCategory: {categoryId:},
                            productIsEnabled:'',
                            productCreateDate:'',
                            productName:'',
                            productTitle:'',
                            productPrice:'',
                            productSalePrice:''
                        }
                    }
                }*/
            },
            getProductDetail() {       //渲染页面时先获取要填写的值
                this.$axios.get("/api/category").then(res => { //将已有种类集合拿到
                    this.category = res.data   //赋值给category[]
                    console.log("所有种类：", res.data)
                })

                this.$axios.get(`/api/productImage/${this.productId}/0`).then(res => {
                    this.imageRoughUrl = res.data    //获取概述图片集合
                    console.log("概述图片集合",this.imageRoughUrl)
                })
                this.$axios.get(`/api/productImage/${this.productId}/1`).then(res =>{
                    this.imageDetailUrl = res.data   //获取详细图片集合
                    console.log("详细图片集合",this.imageDetailUrl)
                })


            },

        },
        created() {   //组件创建结束
            this.getProductDetail()
        },
    }
</script>

